<template>
  <div class="memberList">
    <van-nav-bar title="成员列表" left-text="返回" left-arrow @click-left="router.back()" @click-right="openMenu">
      <template #right><van-icon name="wap-nav" size="18" /></template>
    </van-nav-bar>
    <div class="member-list">
      <template v-for="member in memberList" :key="member.id">
        <van-swipe-cell>
          <template #left>
            <van-button square type="danger" text="删除" @click="deleteMember(member.id)" />
          </template>
          <van-cell is-link :to="`/member/${member.id}`">
            <template #title>
              <div class="title">
                <div class="avatar">
                  <van-icon name="user-circle-o" style="font-size: 30px;" v-if="!member.user?.avatar" />
                  <van-image round width="30" height="30" v-else :src="member.user?.avatar" />
                </div>
                <span class="name">{{ member.name }}</span>
                <span class="user">{{ member.user?.nickname }}</span>
                <div v-if="member.isCreator" style="margin-left: 10px;">
                  <van-tag type="primary">创建者</van-tag>
                </div>
              </div>
            </template>
          </van-cell>
          <template #right>
            <van-button square type="primary" text="上移" @click="sortMember(member.id, 'up')" />
            <van-button square type="primary" text="下移" @click="sortMember(member.id, 'down')" />
          </template>
        </van-swipe-cell>
      </template>
    </div>
    <div class="add-btn">
      <van-button icon="plus" style="height: 25px;" @click="addMember">添加成员</van-button>
    </div>

    <!-- 更多选项 -->
    <van-action-sheet v-model:show="showMenu" :actions="[
        { name: '添加成员', icon: 'plus', callback: addMember },
        { name: '邀请成员', icon: 'share', callback: inviteMember },
      ]" cancel-text="取消" close-on-click-action />
    <!-- 添加成员 -->
    <van-popup v-model:show="showAddMember" closeable position="bottom" :style="{ height: '50%' }">
      <div class="addMember">
        <van-cell title="添加成员" />
        <van-field v-model="addMemberData.name" label="成员姓名" placeholder="请输入成员姓名" />
        <van-button type="primary" block style="margin: 40px auto; width: 200px; height: 30px;"
          @click="addMemberConfirm">确认添加</van-button>
      </div>
    </van-popup>
    <!-- 邀请成员 -->
    <van-popup v-model:show="showInviteMember" closeable position="bottom" :style="{ height: '50%' }">
      <div class="inviteMember">
        <van-cell title="邀请成员" />
        <van-field v-model="inviteMemberData.name" label="预填姓名" placeholder="请输入成员姓名" />
        <van-field label="允许更改">
          <template #input>
            <van-switch v-model="inviteMemberData.editable" />
          </template>
        </van-field>
        <van-button type="primary" block style="margin: 40px auto; width: 200px; height: 30px;"
          @click="inviteMemberConfirm">生成邀请</van-button>
      </div>
    </van-popup>
    <!-- 邀请成员面板 -->
    <van-popup v-model:show="showInviteLink" closeable position="bottom" :style="{ height: '50%' }">
      <div class="inviteLink">
        <van-cell title="邀请链接" />
        <van-field v-model="inviteLink" label="邀请链接" readonly />
        <!-- 复制链接 -->
        <van-button type="primary" block style="margin: 40px auto; width: 200px; height: 30px;"
          @click="copyLink">复制链接</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { ref } from 'vue';
import { showSuccessToast, showFailToast, showLoadingToast, closeToast } from 'vant';
// import API from "@/api";

const router = useRouter()

// 成员数据
const memberList = ref([
  { id: 1, name: '张三', user: { id: 1, nickname: 'htfc786', avatar: 'https://wx.qlogo.cn/mmhead/ver_1/Y1eic2n60qZDduN24PgGlLPeaJjru91MN4mWVz4O6XpOVGhYZY7iaLb4cm5sG7v4yp2UPfYKQETZ6cvlxGV6b8piac5ibhEbCrQbzN1xJIibWRxgub5UMiclTJOyx7wKtx7exV/0' }, isCreator: true },
  { id: 2, name: '李四', user: null, isCreator: false },
  { id: 1, name: '超长内容超长内容超长内容超长内容超长内容超长内容', user: { id: 1, nickname: '超长内容超长内容超长内容超长内容超长内容', avatar: 'https://wx.qlogo.cn/mmhead/ver_1/Y1eic2n60qZDduN24PgGlLPeaJjru91MN4mWVz4O6XpOVGhYZY7iaLb4cm5sG7v4yp2UPfYKQETZ6cvlxGV6b8piac5ibhEbCrQbzN1xJIibWRxgub5UMiclTJOyx7wKtx7exV/0' }, isCreator: false },
])

// 菜单
const showMenu = ref(false)
const openMenu = () => showMenu.value = true

// 添加成员
const showAddMember = ref(false)
const addMember = () => showAddMember.value = true
const addMemberData = ref({
  name: '',
})
const addMemberConfirm = () => {
  showLoadingToast({
    message: '添加中...',
    forbidClick: true,
    duration: 0,
  });
  setTimeout(() => {
    closeToast();
    showSuccessToast('添加成功');
    showFailToast;
    showAddMember.value = false
    memberList.value.push({
      id: memberList.value.length + 1,
      name: addMemberData.value.name,
      user: null,
      isCreator: false,
    })
    addMemberData.value.name = ''
  }, 1000);
}


// 邀请成员
const showInviteMember = ref(false)
const inviteMember = () => showInviteMember.value = true;
const inviteMemberData = ref({
  name: '',
  editable: false,
})
const inviteMemberConfirm = () => {
  showLoadingToast({
    message: '邀请中...',
    forbidClick: true,
    duration: 0,
  });
  setTimeout(() => {
    closeToast();
    showSuccessToast('邀请成功');
    showInviteMember.value = false
    inviteMemberData.value.name = ''
    openInviteLinkPopup('https://www.baidu.com');
  }, 1000);
}
// 邀请成员链接展示面板
const showInviteLink = ref(false)
const inviteLink = ref('');
const openInviteLinkPopup = (link: string) => {
  showInviteLink.value = true;
  inviteLink.value = link;
}
const copyLink = () => {
  if (navigator.clipboard) {
    navigator.clipboard.writeText(inviteLink.value)
  } else {
    const textarea = document.createElement('textarea')
    textarea.value = inviteLink.value
    document.body.appendChild(textarea)
    textarea.select()
    document.execCommand('copy')
    document.body.removeChild(textarea)
  }
  showSuccessToast('复制成功');
}


// 成员排序
const sortMember = (id: number, sort: 'up' | 'down') => {
  showSuccessToast("TODO: 成员排序 " + sort + " " + id);
}

// 删除成员
const deleteMember = (id: number) => {
  showSuccessToast("TODO: 删除成员 " + id);
}

</script>

<style scoped>
.memberPage {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.member-list {
  flex: 1;
  overflow-y: auto;
}
.title {
  display: flex;
  align-items: center;
}
.avatar {
  width: 32px;
  height: 32px;
}
.name {
  margin-left: 10px;
  font-size: 16px;
  font-weight: bold;
}
.user {
  margin-left: 10px;
  font-size: 14px;
  color: #999;
}
.add-btn {
  margin: 30px;
  display: flex;
  justify-content: center;
}
</style>